<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<title>个人主页</title>
	</head>
	<body>
		
		<!--div+CSS-->
		<!-- <input type="button" value="提交" class="layui-btn-danger"/> -->
		
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md3 ">
					<!-- 个人信息 -->
					<div class="layui-card" style="border: 1px #000000 double;">
						<div class="layui-card-header layui-bg-gray">
							<span class="layui-icon layui-icon-about"></span>个人信息
						</div>
						<div class="layui-card-body" align="center">
							<img class="layui-circle" src="img/头像.png" style="width: 100px;height: 100px;" />
							<br />
							<label class="layui-bg-black" style="font-size: 20px;padding-left: 20px;padding-right: 20px;">
								<code>严&nbsp;逸&nbsp;舟</code>
							</label>
							<div align="left">
								<span class="layui-icon layui-icon-location"></span>国籍：中国<br>
								<span class="layui-icon layui-icon-home"></span>地址：天津市西青区中北镇<br>
								<span class="layui-icon layui-icon-date"></span>出生日期：2019-11-28<br>
								<span class="layui-icon layui-icon-cellphone"></span>联系电话：18959201309<br>
								<span class="layui-icon layui-icon-template"></span>Email：2311759275@qq.com<br>
							</div>
						</div>
					</div>
					<!-- 技术能力 -->
					<div class="layui-card" style="border: 1px #000000 double;">
						<div class="layui-card-header layui-bg-orange">
							<span class="layui-icon layui-icon-speaker"></span>技术能力
						</div>
						<div class="layui-card-body">
							HTML5:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
							</div>
							CSS3:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-green" lay-percent="90%"></div>
							</div>
							JavaScript:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-orange" lay-percent="60%"></div>
							</div>
							BootStrap:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-red" lay-percent="70%"></div>
							</div>
							JQuery:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-yellow" lay-percent="65%"></div>
							</div>
						</div>
					</div>
					<!-- 联系我 -->
					<div class="layui-card" style="border: 1px #000000 double;">
						<div class="layui-card-header layui-bg-blue">
							<span class="layui-icon layui-icon-camera"></span>联系我
						</div>
						<div class="layui-card-body" align="left">
							<form class="layui-form">
								<div class="layui-form-item">
									<label class="layui-form-label">Email:</label>
									<div class="layui-input-block" style="border: 1px #007DDB dashed;">
										<input type="text" id="email" placeholder="请输入邮箱" class="layui-input" />
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">内容：</label>
									<div class="layui-input-block" style="border: 1px #007DDB dashed;">
										<textarea class="layui-textarea" cols="50" rows="5" placeholder="请输入内容"></textarea>
									</div>
								</div>
								<div align="right"><a href="" class="layui-btn layui-btn-radius layui-btn-normal">发送</a></div>
							</form>
						</div>
					</div>
				</div>
				<div class="layui-col-md9">
					<!-- 自我介绍 -->
					<div class="layui-card">
						<div class="layui-card-body layui-bg-gray" style="font-size: 14px;">
							&nbsp;&nbsp;本人来自天津中德应用技术大学软件与通信学院，2018级学生，精通<code style="color: #007DDB;">HTML5</code>，CSS3，JavaScript等网页开发技术，熟练使用HBuilder，Git等开发工具

							<div align="right">
								<a href="" class="layui-btn layui-btn-lg layui-bg-green">了解更多...</a>
							</div>
						</div>
					</div>
					<!-- 教育经历 -->
					<div class="layui-collapse">
						<div class="la layui-colla-item ">
							<div class="layui-colla-title">工作经验</div>
							<div class="layui-colla-content layui-show">
								<table class="layui-table" lay-even>
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>工作单位</td>
										<td>联系人</td>
										<td>备注</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="id" /></td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
								</table>
								
							</div>
							<div class="la layui-colla-item ">
							<div class="layui-colla-title">教育经历</div>
							<div class="layui-colla-content">
								<table class="layui-table" lay-even>
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>工作单位</td>
										<td>联系人</td>
										<td>备注</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="id" /></td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
								</table>
								
							</div>
							<div class="la layui-colla-item ">
							<div class="layui-colla-title">项目经验</div>
							<div class="layui-colla-content ">
								<table class="layui-table" lay-even>
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>工作单位</td>
										<td>联系人</td>
										<td>备注</td>
									</tr>
									<tr>
										<td><input type="checkbox" id="id" /></td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2017-7~2019-11</td>
										<td>融创软通</td>
										<td>严逸舟</td>
										<td>18959201309</td>
									</tr>
								</table>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 图片轮播 -->
			<div class="layui-card">
				<div class="layui-card-header">获奖证书</div>
				<div class="layui-card-body">
					<div class="layui-carousel" id="certify">
						<div carousel-item>
							<div><img style="width: 100%; height: 100%;" src="img/证书1.jpg"></div>
							<div><img style="width: 100%; height: 100%;" src="img/证书2.jpg"></div>
							<div><img style="width: 100%; height: 100%;" src="img/证书3.jpg"></div>
							<div><img style="width: 100%; height: 100%;" src="img/证书4.jpg"></div>
					</div>						
			</div>
		</div>
</div>
</div>
</div>

		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>
<div class="layui-footer" align="center">
	<address>&copy;2019-2020 Powered By 融创软通</address>
	
</div>
<script>
layui.use(['element','carousel'], function(){
  var element = layui.element;
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#certify',
	autoplay:true,
	width: '100%' ,//设置容器宽度
	interval:800,
	arrow: 'always' //始终显示箭头
	,anim: 'default' //切换动画方式
  });
});
</script>
	</body>
</html>
